<template>

    <div class="header">
        <div class="header-left">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="header-input">
            <el-input
                placeholder="输入城市/景点/游玩主题"
                prefix-icon="el-icon-search"
                v-model="input"
                >
            </el-input>
        </div>
        <router-link :to="{name : 'city'}">
            <div class="header-right">
                <span>{{this.city}}</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
        </router-link>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      input: ''
    }
  },
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/varibles.styl';
    .header
        position : relative
        line-height : $headerHeight
        height : 0.9rem
        color : #fff
        display : flex
        background : $bgColor
        .header-left
            width : 0.64rem
            // float : left
            position : absolute
            left : 0
            top : 0.1rem
            text-align : center
            cursor : pointer
            >i
                font-weight : bolder
                font-size : 0.5rem;
        .header-input
            flex : 1
            padding-left : 0.7rem
            height: .4rem
            .el-input
                width: 100%
                border-radius : 0.1rem
        .header-right
            min-width : 1.04rem
            padding : 0.1rem
            float : right
            text-align : center
            cursor : pointer
            color : #fff
            i
                font-size : 0.4rem
</style>
